<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%> 
<s:property value="jsonString" escape="false" /> 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>后台管理系统——用户管理</title>
</head>
<STYLE type="text/css">

.ss {
    text-align: left;;
}

.icon-grid {
    background-image: url(grid.png) !important;
}

.add {
    background-image: url(new.png) !important;
}

.edit {
    background-image: url(edit.png) !important;
}

.remove {
    background-image: url(del.png) !important;
}
	
/* Override standard grid styles (add colour to vertical grid lines) */   
.x-grid3-col {   
    border-left:  1px solid #EEEEEE;   
    border-right: 1px solid #D2D2D2;   
}   
    
/* Also remove padding from table data (to compensate for added grid lines) */   
.x-grid3-row td, .x-grid3-summary-row td {   
    padding-left: 0px;   
    padding-right: 0px;   
}  
	

</STYLE>


<script type="text/javascript">
	//myinit();//初始化   
//大家在很多的extjs代码中都看到了这两个，他们都起提示作用的
Ext.QuickTips.init();//支持tips提示
Ext.form.Field.prototype.msgTarget='side';//提示的方式，枚举值
var record_start = 0;
  
Ext.onReady(function() {   
  
    Ext.QuickTips.init();   
  
    var newFormWin;   
  
    var form1;   
  
//定义一个JsonReader对象，用于表格列表数据显示，即grid对象   
  	
    var _jsonReader = new Ext.data.JsonReader({  
        root : 'results',   
        totalProperty : 'totalCount', 
        id : 'id'
        //successProperty : '@success'  
    }, ['adddate',
        'address1',
        'address2',
        'address3',
        'bigheadpicture',
        'birthday',
        'cardid',
        'cardtype',
        'email',
        'id',
        'logrestoresForUprestoreid',
        'logrestoresForUsersid',
        'mobile',
        'orderinfos',
        'password',
        'smallheadpicture',
        'telephone',
        'total',
        'userlogs',
        'username']);   
  	
  	//var userName = Ext.get('username').getValue(); 
  		
    // Store对象，注意proxy配置参数，如果url : 'LevelAjaxJsonData.action'与程序在同一应用下面，就用new Ext.data.HttpProxy，如果不在同一应用中要用Ext.data.ScriptTagProxy对象   
  
        var ds = new Ext.data.Store( { 
            proxy : new Ext.data.HttpProxy( {
                url : 'allUsers.action'  
            }),   
            reader : _jsonReader   
        });   
  
        ds.setDefaultSort('id', 'desc');//设置默认的排序字段 desc
  
        // ColumnModel对象，用于grid对象中的列格式化配置   
  
        var cm = new Ext.grid.ColumnModel([new Ext.grid.RowNumberer(), {   
            id : 'id',   
            header : '编号',  
            dataIndex : 'id',
            sortable : true,   
            width : 40   
        }, {   
            header : "用户名",   
            dataIndex : 'username',   
            width : 50,   
            sortable : true,   
            locked : false  
        }, {   
            header : "密码",   
            dataIndex : 'password',   
            width : 100   
        }, {   
            header : "证件号码",   
            dataIndex : 'cardid',   
            width : 100   
        }, {   
            header : "手机号码",   
            dataIndex : 'mobile',   
            width : 100   
        }, {   
            header : "电子邮箱",   
            dataIndex : 'email',   
            width : 100   
        }, {   
            header : "注册日期",   
            dataIndex : 'adddate',   
            width : 100   
        }
        ]);   
  
        ds.setDefaultSort('id', 'desc');//设置默认的排序字段 aesc/desc
           
		// GridPanel对象   
        var grid = new Ext.grid.GridPanel( {   
            // var grid = new Ext.grid.EditorGridPanel( {   
            collapsible : true,// 是否可以展开  
            animCollapse : false,// 展开时是否有动画效果
            columnLines:true,//显示单元格 
             bodyStyle : "width:100%",
            iconCls : 'icon-grid', 
            store : ds,
            frame:true,	//渲染表格面板
            stripeRows:true,//显示斑马线
            viewConfig:{
            	autoFill:true	//	自动充满表格
            },
            cm : cm,   
            renderTo : 'topic-grid',  
            viewConfig : {   
                forceFit : true    
            },   
  			bodyStyle : "width:100%",
			monitorResize: true,
	        ds: ds,
	        cm: cm,
	        sm: new Ext.grid.RowSelectionModel({
		                singleSelect: false,
		                listeners: {
		                    rowselect: function(sm, row, rec) {
		                        Ext.getCmp("users-form").getForm().loadRecord(rec);
		                    }
		                }
		     }),  
            // 添加分页工具栏   
            bbar : new Ext.PagingToolbar( {   
                pageSize : 15,   
                store : ds,   
                displayInfo : true,   
                displayMsg : '显示 {0}-{1}条 / 共 {2} 条',   
                emptyMsg : "没有数据！"
            }),   
  
            // 添加内陷的工具条   
            tbar : [ {   
                id : 'New1',   
                text : ' 注册  ',   
                tooltip : '注册新用户',   
                iconCls : 'add',   
                handler : function() {   
                ptb_bt1();   
                }   
            }, '-', {   
                text : '修改',   
                tooltip : '修改用户信息',   
                iconCls : 'option',   
                handler : function() {   
                ptb_bt2();   
                }   
            }, '-', {   
                text : '删除',   
                tooltip : '删除选中用户',   
                iconCls : 'remove',   
                handler : function() {   
                ptb_bt3();   
                }   
            }],    
            height : 408,   
            frame : true,   
            loadMask : true,// 载入遮罩动画   
            autoShow : true  
        });   
	//数据载入   
        ds.load( {   
            params : {   
                start : 0,	//开始数   
                limit : 15	//每次载入数量，服务器段就根据这两个参数来处理数据分页 forumId : 4   
            }   
        }); 
          
     grid.render();  

	//添加行双击事件，双击是可以打开修改窗口
   	grid.on("rowdblclick",  function(sm, row, rec){   
         loadFormData();   
     }); 
    // 载入被选择的数据行的表单数据 
    var loadFormData = function() { 
        var m = grid.getSelections();//所有被选择的行  
        if(m.length>1){
        	Ext.Msg.alert('修改操作', '请选一项要修改的数据！');
        }else{
        	var _record = grid.getSelectionModel().getSelected();
        	//alert(_record.data.id);  
	        if (!_record) {//这里判断是否有行已经被选择   
	            Ext.Msg.alert('修改操作', '请选一项要修改的数据！');   
	        } else {
	            myFormWin();   
	            form1.form.load({   
	                url : 'findUsersById.action?id=' + _record.get('id'),   
	                waitMsg : '正在载入数据...', 
	                failure : function() {  
	                    Ext.Msg.alert('编辑', '载入失败');
	                    newFormWin.hide();    
	                }
	            });
	        }  
        } 
    }   
  
    // 分页工具栏按钮--新建事件 
    var ptb_bt1 = function() {   
        myFormWin();   
    };   

    // 修改操作事件
    var ptb_bt2 = function() {   
        loadFormData();   
    };   
  
    // 删除事件   
    var ptb_bt3 = function() {   
        var _record = grid.getSelectionModel().getSelected();   
        if (_record) {//判断是否有行被选择   
            Ext.MessageBox.confirm('确认删除', '你确认要删除选中的数据项吗？', function(btn) {   
                if (btn == "yes") {   
                   delSysMenuType(grid);   
                }   
            });   
        } else {   
            Ext.Msg.alert('删除操作', '请选择要删除的数据项！');   
        }   
    };  
        
        
    function delSysMenuType(grid){
	   	var msgTip = Ext.Msg.show({
	   		title:'提示',
	   		width:250,
	   		msg:'正在删除，请稍后……'
	   	});
	   	var m = grid.getSelections();//所有被选择的行   
		var jsonData = ""; 
		for (var i = 0, len = m.length;i < len; i++) {   
		    var ss = m[i].get("id");   
		    if (i == 0) {   
		        jsonData = jsonData + ss;   
		    } else {   
		        jsonData = jsonData + "," + ss;   
		    } 
		}   
     	Ext.Ajax.request({
     		url:'delUsers.action?ids='+jsonData,
     		success : function(response,options){
     			msgTip.hide();
     			var result = Ext.util.JSON.decode(response.responseText);
     			if(result.success){
			var m = grid.getSelections();//所有被选择的行   
			var jsonData = "";//   
			for (var i = 0, len = m.length;i < len; i++) {   
			    var ss = m[i].get("id");   
			    if (i == 0) {   
			        jsonData = jsonData + ss;   
			    } else {   
			        jsonData = jsonData + "," + ss;   
			    }   
			    ds.remove(m[i]);   
			}   
     				Ext.Msg.alert('提示','删除成功！');
     			}else{
     				Ext.Msg.alert('提示','删除失败！');
     			}
     		},
     		failure : function(response,options){
     			msgTip.hide();
     			Ext.Msg.alert('提示','请求删除失败！');
     		}
     	});
        	/*
             ds.load( {   
                 params : {   
                     start : 0,   
                     limit : 30,   
                     delData : jsonData//这里是向服务器段发送的数据信息，一般采用JSON协议，这儿直接采用，只发送用逗号分割的ID号序列， 以方便   
                 }   
             });   
             */
        } 
  
        // form_win定义一个Window对象，用于新建和修改时的弹出窗口。 
        var myFormWin = function() {
            if (!newFormWin) {
                newFormWin = new Ext.Window( {   
                    el : 'topic-win',   
                    layout : 'fit',   
                    width : 400,   
                    height : 300,   
                    closeAction : 'hide',   
                    plain : true,   
                    title : '用户管理',   
                    items : form1,   
                    reader : _jsonReader   
                });   
            }   
            newFormWin.show('New1');
            /*
             var bd = Ext.getDom("randCode");   
		    var bd2 = Ext.get(bd.parentNode); 	    
		    bd2.createChild({   
		        tag : "img",
		        src : "imagenumber",
		        align : "absmiddle"  
		    });
		    */       
        }   
  
		//用窗体Form的JsonReader对象，修改时数据载入解析 
        var _jsonFormReader = new Ext.data.JsonReader( {   
            root : 'results',   
            totalProperty : 'totalCount',   
            id : 'id', 
            successProperty : '@success'  
        }, [ {   
            name : 'users.id',   
            mapping : 'id',   
            type : 'int'  
        }, {   
            name : 'users.username',   
            mapping : 'username'  
        }, {   
            name : 'users.password',   
            mapping : 'password'  
        }]);   
  
        // 窗体   
  
        form1 = new Ext.FormPanel( {   
            // collapsible : true,// 是否可以展开   
            labelWidth : 75, // label settings here cascade unless overridden   
            id : 'users-form', 
            url : 'saveUsers.action',   
            frame : true,   
            bodyStyle : 'padding:5px 5px 0',   
            width : 350,   
            waitMsgTarget : true,   
            reader : _jsonFormReader,   
            defaults : {   
                width : 200   
            },   
  			labelAlign:"right",//label对齐方式
            defaultType : 'textfield',   
            items : [{   
                     cls : "user",   
                     name : "users.username",   
                     fieldLabel : "用户名",   
                     blankText : "用户名不能为空",
                     id : "username",      
                     msgTarget:"side"
                     //allowBlank:false,//false则不能为空，默认为true
					 //blankText:"请输入用户名"	 //当为空时的错误提示信息
                     
                 }, {   
                     cls : "key",   
                     name : "users.password",   
                     fieldLabel : "密码",   
                     blankText : "密码不能为空",   
                     inputType : "password",   
                     msgTarget:"side"  
                 }, {   
                     cls : "rand",   
                     name : "randCode",   
                     id : "randCode",   
                     fieldLabel : "验证码",   
                     width : "80",   
                     blankText : "验证码不能为空"  
                    }, new Ext.form.Hidden( {                 
                	name : 'users.id'
            })], 
            buttons : [ {   
                text : '保存',   
                disabled : false,   
                handler : function() {   
                    if (form1.form.isValid()) {   
                        form1.form.submit( {   
                            url : 'saveUsers.action',   
                            success : function(from, action) {   
                                Ext.Msg.alert('保存成功', action.result.message);   
                                ds.load( {   
                                    params : {   
                                        start : 0,   
                                        limit : 15   
                                    }   
                                });   
                            },   
                            failure : function(form, action) {   
                                Ext.Msg.alert('保存失败',  action.result.message);   
                            },   
                            waitMsg : '正在保存数据，稍后...'  
                        });   
                        newFormWin.hide();  
                    } else {   
                        Ext.Msg.alert('信息', '请填写完成再提交!');   
                    }   
                }  
            }, { 
                text : '取消', 
                handler : function() {
               		newFormWin.hide();
                }  
            }] 
        });
   });       
</script>
<body class="x-vista">   
  
<div id="topic-grid"></div>     
<div id="topic-win" class="x-hidden">  
	<div class="x-window-header">Hello Dialog</div>  
	<div id="topic-tabs"></div> 
</div>  
<div id="grid-example"></div>
</body>
</html>